<template>
  <div class="search-div">
    <el-form label-width="70px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-select
              class="m-2"
              v-model="queryDto.brandId"
              placeholder="选择品牌"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类">
            <el-cascader
              :props="categoryProps"
              style="width: 100%"
              v-model="searchCategoryIdList"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="fetchData">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>
  </div>

  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>

  <el-table :data="list" style="width: 100%">
    <el-table-column
      prop="sliderUrls"
      label="轮播图"
      #default="scope"
      width="200"
    >
      <div style="height: 50px;float: left;">
        <img
          v-for="(item, index) in scope.row.sliderUrls"
          :key="index"
          :src="item"
          width="50"
        />
      </div>
    </el-table-column>
    <el-table-column prop="name" label="商品名称" width="160" />
    <el-table-column prop="brandName" label="品牌" />
    <el-table-column prop="category1Name" label="一级分类" />
    <el-table-column prop="category2Name" label="二级分类" />
    <el-table-column prop="category3Name" label="三级分类" />
    <el-table-column prop="unitName" label="计量单位" />
    <el-table-column prop="status" label="状态" #default="scope">
      {{
        scope.row.status == 0
          ? '未上架'
          : scope.row.status == 1
          ? '上架'
          : '下架'
      }}
    </el-table-column>
    <el-table-column prop="auditStatus" label="审核状态" #default="scope">
      {{
        scope.row.auditStatus == 0
          ? '未审核'
          : scope.row.auditStatus == 1
          ? '通过'
          : '驳回'
      }}
    </el-table-column>
    <el-table-column label="操作" align="center" width="200" #default="scope">
      <el-button
        type="primary"
        size="small"
        @click="editShow(scope.row)"
        style="padding: 5px; margin-left: 5px;"
      >
        修改
      </el-button>
      <el-button
        type="danger"
        size="small"
        @click="remove(scope.row.id)"
        style="padding: 5px; margin-left: 5px;"
      >
        删除
      </el-button>
      <el-button
        v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == -1"
        type="success"
        size="small"
        @click="audit(scope.row.id)"
        style="padding: 5px; margin-left: 5px;"
      >
        审批
      </el-button>
      <el-button
        v-if="
          scope.row.auditStatus == 1 &&
            (scope.row.status == 0 || scope.row.status == -1) &&
            scope.row.status == 0
        "
        type="warning"
        size="small"
        @click="updateStatus(scope.row.id, 1)"
        style="padding: 5px; margin-left: 5px;"
      >
        上架
      </el-button>
      <el-button
        v-if="
          scope.row.auditStatus == 1 &&
            (scope.row.status == 0 || scope.row.status == 1) &&
            scope.row.status == 1
        "
        type="warning"
        plain
        size="small"
        @click="updateStatus(scope.row.id, -1)"
        style="padding: 5px; margin-left: 5px;"
      >
        下架
      </el-button>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <el-dialog v-model="dialogVisible" title="添加或修改" width="80%">
    <el-form
      label-width="120px"
      style="margin-top: 10px;"
      :label-position="labelPosition"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="商品基本信息" name="productBaseInfo">
          <el-form-item label="商品名称">
            <el-input v-model="product.name" />
          </el-form-item>
          <el-form-item label="分类">
            <el-cascader
              style="width: 100%;"
              :props="categoryProps"
              v-model="categoryIdList"
              @change="categoryChange"
            />
          </el-form-item>
          <el-form-item label="品牌">
            <el-select
              class="m-2"
              placeholder="选择品牌"
              v-model="product.brandId"
              style="width: 100%;"
            >
              <el-option
                v-for="item in categoryBrandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品单元">
            <el-select
              v-model="product.unitName"
              style="width: 100%;"
              class="m-2"
              placeholder="商品单元"
            >
              <el-option
                v-for="item in unitList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="轮播图">
            <el-upload
              v-model:file-list="fileList"
              action="http://localhost:8501/admin/system/fileUpload"
              list-type="picture-card"
              multiple
              :on-success="handleSliderSuccess"
              :on-remove="handleRemove"
              :headers="headers"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="商品SKU信息" name="skuInfo">
          <el-form-item label="选择规格">
            <el-select
              :disabled="product.id != '' && product.id != undefined"
              v-model="product.specValue"
              style="width: 100%;"
              class="m-2"
              placeholder="选择规格"
              size="default"
              @change="changeSpecValueList"
            >
              <el-option
                v-for="item in specList"
                :key="item.specValue"
                :label="item.specName"
                :value="item.specValue"
              />
            </el-select>
          </el-form-item>

          <div
            class="specValue"
            v-for="(item, index) in specValueList"
            :key="index"
          >
            <span class="tag-group__title">{{ item.key }}</span>
            <el-tag
              class="tag-group__title"
              type="success"
              effect="dark"
              v-for="(specValue, index) in item.valueList"
              :key="index"
            >
              {{ specValue }}
            </el-tag>
          </div>

          <el-form-item label="商品SKU">
            <el-table :data="product.productSkuList" border style="width: 100%">
              <el-table-column prop="skuSpec" label="规格" width="180" />
              <el-table-column label="图片" #default="scope" width="80">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8501/admin/system/fileUpload"
                  :show-file-list="false"
                  :on-success="
                    (response, uploadFile, fileList) =>
                      handleSkuSuccess(
                        response,
                        uploadFile,
                        fileList,
                        scope.row
                      )
                  "
                  :headers="headers"
                >
                  <img
                    v-if="scope.row.thumbImg"
                    :src="scope.row.thumbImg"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-table-column>
              <el-table-column label="售价" #default="scope">
                <el-input v-model="scope.row.salePrice" />
              </el-table-column>
              <el-table-column label="市场价" #default="scope">
                <el-input v-model="scope.row.marketPrice" />
              </el-table-column>
              <el-table-column label="成本价" #default="scope">
                <el-input v-model="scope.row.costPrice" />
              </el-table-column>
              <el-table-column label="库存数" #default="scope">
                <el-input v-model="scope.row.stockNum" />
              </el-table-column>
              <el-table-column label="重量" #default="scope">
                <el-input v-model="scope.row.weight" />
              </el-table-column>
              <el-table-column label="体积" #default="scope">
                <el-input v-model="scope.row.volume" />
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="商品详情信息" name="productDetails">
          <el-form-item label="详情图片">
            <el-upload
              v-model:file-list="detailsFileList"
              action="http://localhost:8501/admin/system/fileUpload"
              list-type="picture-card"
              multiple
              :on-success="handleDetailsSuccess"
              :on-remove="handleDetailsRemove"
              :headers="headers"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="保存修改数据" name="submit" :disabled="true">
          <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </el-dialog>

  <el-dialog v-model="dialogAuditVisible" title="审批" width="80%">
    <el-form :model="product" label-width="120px" style="margin-top: 10px;">
      <el-divider />
      <span style="margin-bottom: 5px;">商品基本信息</span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名称">
            {{ product.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类">
            {{ product.category1Name }} => {{ product.category2Name }} =>
            {{ product.category3Name }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌">
            {{ product.brandName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计量单位">
            {{ product.unitName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="创建时间">
            {{ product.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            {{
              product.auditStatus == 0
                ? '未审核'
                : product.auditStatus == 1
                ? '通过'
                : '驳回'
            }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="轮播图">
            <img
              v-for="(item, index) in sliderUrlList"
              :key="index"
              :src="item"
              style="width: 50px;"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider />
      <span style="margin-bottom: 5px;">商品SKU信息</span>
      <el-form-item label="商品SKU">
        <el-table :data="product.productSkuList" border style="width: 100%">
          <el-table-column prop="skuSpec" label="规格" width="180" />
          <el-table-column label="图片" #default="scope" width="80">
            <img :src="scope.row.thumbImg" style="width: 80px;" />
          </el-table-column>
          <el-table-column label="售价" prop="salePrice" />
          <el-table-column label="市场价" prop="marketPrice" />
          <el-table-column label="成本价" prop="costPrice" />
          <el-table-column label="库存数" prop="stockNum" />
          <el-table-column label="重量" prop="weight" />
          <el-table-column label="体积" prop="volume" />
        </el-table>
      </el-form-item>

      <el-divider />
      <span style="margin-bottom: 5px;">商品详情信息</span>
      <el-form-item label="详情图片">
        <img
          v-for="(item, index) in detailsImageUrlList"
          :key="index"
          :src="item"
          style="width: 80px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          size="large"
          @click="updateAuditStatus(product.id, 1)"
        >
          通过
        </el-button>
        <el-button
          type="success"
          size="large"
          plain
          @click="updateAuditStatus(product.id, -1)"
        >
          驳回
        </el-button>
        <el-button size="large" @click="dialogAuditVisible = false">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { FindAllBrand } from '@/api/brand.js'
import { FindCategoryByParentId } from '@/api/category.js'
import {
  GetProductPageList,
  SaveProduct,
  UpdateProductById,
  GetProductById,
  DeleteProductById,
  UpdateProductStatus,
  UpdateProductAuditStatus,
} from '@/api/product.js'
import { FindBrandByCategoryId } from '@/api/categoryBrand.js'
import { FindAllProductUnit } from '@/api/productUnit.js'
import { FindAllProductSpec } from '@/api/productSpec.js'
import { useApp } from '@/pinia/modules/app'
import { ElMessage, ElMessageBox } from 'element-plus'

// ----------------------------------------------------分页列表查询 start --------------------------------------------------------------------------
// 品牌列表数据模型
const brandList = ref([])

// 分类列表
const props = {
  lazy: true,
  value: 'id',
  label: 'name',
  leaf: 'leaf',
  checkStrictly: true,
  async lazyLoad(node, resolve) {
    // 加载数据的方法
    if (typeof node.value == 'undefined') node.value = 0
    const { data } = await FindCategoryByParentId(node.value)
    data.forEach(function(item) {
      //hasChildren判断是否有子节点
      item.leaf = !item.hasChildren
    })
    resolve(data) // 返回数据
  },
}
const categoryProps = ref(props)

// 选中的数据模型
const queryDto = ref({
  brandId: '',
  category1Id: '',
  category2Id: '',
  category3Id: '',
})
const searchCategoryIdList = ref([])

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 表格数据模型
const list = ref([])

// 总记录数数据模型
const total = ref(0)

// 钩子函数
onMounted(async () => {
  const { data } = await FindAllBrand()
  brandList.value = data
  fetchData()
})

//页面变化
const handleSizeChange = size => {
  pageParams.value.limit = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParams.value.page = number
  fetchData()
}

//重置
const resetData = () => {
  queryDto.value = {}
  searchCategoryIdList.value = []
  fetchData()
}

// 分页列表查询方法
const fetchData = async () => {
  // 处理三级分类的id
  if (searchCategoryIdList.value.length == 1) {
    queryDto.value.category1Id = searchCategoryIdList.value[0]
  }

  if (searchCategoryIdList.value.length == 2) {
    queryDto.value.category1Id = searchCategoryIdList.value[0]
    queryDto.value.category2Id = searchCategoryIdList.value[1]
  }

  if (searchCategoryIdList.value.length == 3) {
    queryDto.value.category1Id = searchCategoryIdList.value[0]
    queryDto.value.category2Id = searchCategoryIdList.value[1]
    queryDto.value.category3Id = searchCategoryIdList.value[2]
  }

  // 请求后端接口
  const { data } = await GetProductPageList(
    pageParams.value.page,
    pageParams.value.limit,
    queryDto.value
  )
  data.list.forEach(item => {
    item.sliderUrls = item.sliderUrls.split(',')
  })

  // 将响应结果数据设置给对应的属性模型
  list.value = data.list
  total.value = data.total
}

// 控制对话框是否展示的数据模型
const dialogVisible = ref(false)

// 表单label对其方式
const labelPosition = ref('top')

// 对话框激活的面板
const activeNames = ref([
  'productBaseInfo',
  'skuInfo',
  'productDetails',
  'submit',
])

// 表单数据模型
const defaultForm = {
  id: '',
  name: '',
  brandId: '',
  category1Id: '',
  category2Id: '',
  category3Id: '',
  unitName: '',
  sliderUrls: '',
  specValue: '',
  productSkuList: [],
  detailsImageUrls: '',
}
const product = ref(defaultForm)

//进入添加
const addShow = () => {
  props.checkStrictly = false
  dialogVisible.value = true
  //清空
  fileList.value = []
  categoryIdList.value = []
  detailsFileList.value = []
  sliderUrlList.value = []
  specValueList.value = []
  product.value = {}
  fetchProductUnit()
  fetchProductSpect()
}

// 分类级联选择器选中数据以后的数据模型
const categoryIdList = ref([])

// 分类级联选择器数据发送改变以后的事件处理函数
const categoryChange = async () => {
  if (categoryIdList.value.length == 3) {
    product.value.category1Id = categoryIdList.value[0]
    product.value.category2Id = categoryIdList.value[1]
    product.value.category3Id = categoryIdList.value[2]
    const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
    categoryBrandList.value = data
    if (product.value.id) {
      product.value.brandId = ''
    }
  }
}

// 定义品牌的数据模型
const categoryBrandList = ref([])

// 商品单元的数据模型
const unitList = ref([])

// 查询所有的商品单元
const fetchProductUnit = async () => {
  const { data } = await FindAllProductUnit()
  unitList.value = data
}

// 商品规格数据数据模型
const specList = ref([])

// 查询产品规格数据
const fetchProductSpect = async () => {
  const { data } = await FindAllProductSpec()
  specList.value = data
}

const saveOrUpdate = () => {
  console.log('submit!' + product.value)
  product.value.sliderUrls = sliderUrlList.value.join(',')
  product.value.detailsImageUrls = detailsImageUrlList.value.join(',')
  if (!product.value.id) {
    saveData()
  } else {
    updateData()
  }
}

// 新增
const saveData = async () => {
  await SaveProduct(product.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 修改
const updateData = async () => {
  console.log(product.value)
  await UpdateProductById(product.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 展示选择的规则数据
const specValueList = ref([])
const changeSpecValueList = () => {
  specValueList.value = JSON.parse(product.value.specValue)
  const specValueArr = []
  specValueList.value.forEach((item, index) => {
    specValueArr.push(item.valueList)
  })

  // last为上次运算的结果，current为数组中的当前元素
  var result = specValueArr.reduce((last, current) => {
    const array = []
    last.forEach(par1 => {
      current.forEach(par2 => {
        array.push(par1 + ' + ' + par2)
      })
    })
    return array
  })

  console.log(result)
  product.value.productSkuList = []
  result.forEach(function(item) {
    product.value.productSkuList.push({
      skuSpec: item,
      price: 0,
    })
  })
}

// 上传商品轮播图图片
const sliderUrlList = ref([])
const headers = {
  token: useApp().authorization.token, // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}
const handleRemove = (uploadFile, uploadFiles) => {
  sliderUrlList.value.splice(sliderUrlList.value.indexOf(uploadFile.url), 1)
}
const fileList = ref([])
const handleSliderSuccess = (response, uploadFile) => {
  sliderUrlList.value.push(response.data)
}

//sku图片
const handleSkuSuccess = (response, uploadFile, fileList, row) => {
  row.thumbImg = response.data
}

// 上传商品详情图片
const detailsFileList = ref([])
const handleDetailsRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  detailsImageUrlList.value.splice(
    detailsImageUrlList.value.indexOf(uploadFile.url),
    1
  )
  console.log(sliderUrlList.value)
}
const detailsImageUrlList = ref([])
const handleDetailsSuccess = (response, uploadFile) => {
  console.log(response)
  detailsImageUrlList.value.push(response.data)
  console.log(detailsImageUrlList.value)
}

//进入修改
const editShow = row => {
  getById(row.id)
  props.checkStrictly = false
  dialogVisible.value = true
}

const getById = async id => {
  const { data } = await GetProductById(id)
  product.value = data
  // eslint-disable-next-line no-debugger
  console.log(product.value)

  //分类赋值
  categoryIdList.value = [
    product.value.category1Id,
    product.value.category2Id,
    product.value.category3Id,
  ]

  //处理图片
  fileList.value = []
  sliderUrlList.value = product.value.sliderUrls.split(',')
  sliderUrlList.value.forEach(url => {
    fileList.value.push({ url: url })
  })

  // 处理规格数据
  specValueList.value = JSON.parse(product.value.specValue)

  //处理sku
  // product.value.productSkuList.forEach(sku => {
  //   sku.skuSpec = sku.skuSpec.split(',').join(' * ')
  //   sku.skuSpecList = sku.skuSpec.split(',')
  // })

  //处理详情图片
  detailsFileList.value = []
  detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
  detailsImageUrlList.value.forEach(url => {
    detailsFileList.value.push({ url: url })
  })

  //加载分类品牌
  getBrand()
  fetchProductUnit()
  fetchProductSpect()
}

const getBrand = async () => {
  const { data } = await FindBrandByCategoryId(categoryIdList.value[2])
  categoryBrandList.value = data
}

//删除
const remove = async id => {
  console.log('removeDataById:' + id)
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await DeleteProductById(id)
      ElMessage.success('删除成功')
      fetchData()
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}

const dialogAuditVisible = ref(false)
const audit = async id => {
  const { data } = await GetProductById(id)
  product.value = data

  //分类赋值
  categoryIdList.value = [
    product.value.category1Id,
    product.value.category2Id,
    product.value.category3Id,
  ]

  //处理图片
  fileList.value = []
  sliderUrlList.value = product.value.sliderUrls.split(',')
  sliderUrlList.value.forEach(url => {
    fileList.value.push({ url: url })
  })

  // 处理规格数据
  specValueList.value = JSON.parse(product.value.specValue)

  //处理详情图片
  detailsFileList.value = []
  detailsImageUrlList.value = product.value.detailsImageUrls.split(',')
  detailsImageUrlList.value.forEach(url => {
    detailsFileList.value.push({ url: url })
  })

  //加载分类品牌
  getBrand()
  fetchProductUnit()
  fetchProductSpect()

  dialogAuditVisible.value = true
}

const updateAuditStatus = async (id, auditStatus) => {
  await UpdateProductAuditStatus(id, auditStatus)
  dialogAuditVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

//上下架
const updateStatus = async (id, status) => {
  await UpdateProductStatus(id, status)
  dialogAuditVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tag-group__title {
  margin-right: 10px; /* 调整元素之间的水平间距 */
}

.specValue {
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
}

.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}
</style>
